<%@ page import="org.belkodevelop.announcement.domain.Announcement" %>
<%@ page import="org.belkodevelop.realty.domen.Land" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="blocks/header.jsp" %>
<div class="container">
    <div class="span12">
        <div class="page-header">
            <h1>
                <%
                    Announcement announcement = (Announcement)request.getAttribute("announcement");

                    String typeMetricLandAreaCaption = "";

                    if (announcement.getRealty().getType().equals("LAND") || announcement.getRealty().getType().equals("HOUSE")) {

                        String typeMetricLandArea = ((Land)announcement.getRealty()).getTypeMetricLandArea();

                        if (typeMetricLandArea.equals("ha")) {
                            typeMetricLandAreaCaption = "га";
                        } else if (typeMetricLandArea.equals("m2")) {
                            typeMetricLandAreaCaption = "кв. м.";
                        } else if (typeMetricLandArea.equals("100m2")) {
                            typeMetricLandAreaCaption = "ар(100 кв. м.)";
                        }
                    }
                    request.setAttribute("typeMetricLandArea", typeMetricLandAreaCaption);
                %>
                <c:set value="${announcement.realty.type}" var="type" />
                 <c:choose>
                    <c:when test="${type == 'HOUSE'}">
                        ${announcement.operation == "RENT" ? "Аренда " : "Продается " } Дома,
                        ${ announcement.realty.numberRooms }к, ${ announcement.realty.area} кв. м.
                    </c:when>
                    <c:when test="${type == 'APARTMENT'}">
                        ${announcement.operation == "RENT" ? "Аренда " : "Продается  " } Квартира,
                        ${ announcement.realty.numberRooms }к, ${ announcement.reaроlty.area} кв. м.
                    </c:when>
                    <c:when test="${type == 'GARAGE'}">
                        ${announcement.operation == "RENT" ? "Аренда " : "Продается  " } Гараж,
                        ${ announcement.realty.area} кв. м.
                    </c:when>
                    <c:when test="${type == 'LAND'}">
                        ${announcement.operation == "RENT" ? "Аренда " : "Продается  " } Земля,
                        ${ announcement.realty.landArea} ${typeMetricLandArea}
                    </c:when>
                    <c:when test="${type == 'OFFCIE'}">
                        ${announcement.operation == "RENT" ? "Аренда " : "Продается  "  } Офис,
                        ${ announcement.realty.numberRooms }к, ${ announcement.realty.area} кв. м.
                    </c:when>
                    <c:otherwise>
                        Упс... ошибка
                    </c:otherwise>
                </c:choose>
            </h1>
            <div style="padding-top: 5px;">
                <em>${announcement.realty.adress}</em>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $.ajax({
                url:"<c:url value='/api/currency/getCourse.json?ccy=USD&baseCcy=UAH'/>",
                method: "GET",
                dataType: "JSON",
                success: function(data) {
                    if (data) {
                        $("#priceRealtyInUAH").html((${announcement.price}*data.sale).toFixed(2) + " грн.");
                    }
                }
            });
        })
    </script>
    <div class="span4">
        <div class="row">
            <div class="span3 well" style="text-align: center;">
                <h2>${announcement.price} $</h2>
                <h3><span id="priceRealtyInUAH">...</span></h3>
                <hr/>
                <h5>
                    <!--<strong>Описание:</strong>-->
                    ${announcement.realty.description}
                </h5>
            </div>
        </div>
        <div class="row">
            <div class="span3 well" style="text-align: center;">
                <h4>Характеристика</h4>
                <p>
                    <table style="width:100%">
                        <tr>
                        <c:choose>
                            <c:when test="${type == 'HOUSE'}">
                                <tr>
                                    <td>Комнат</td>
                                    <td>${ announcement.realty.numberRooms }</td>
                                </tr>
                                <tr>
                                    <td>Площадь</td>
                                    <td>${ announcement.realty.area} кв. м.</td>
                                </tr>
                                <tr>
                                    <td>Площадь земли</td>
                                    <td>${ announcement.realty.landArea} ${typeMetricLandArea}</td>
                                </tr>
                            </c:when>
                            <c:when test="${type == 'APARTMENT'}">
                                <tr>
                                    <td>Комнат</td>
                                    <td>${ announcement.realty.numberRooms }</td>
                                </tr>
                                <tr>
                                    <td>Площадь</td>
                                    <td>${ announcement.realty.area} кв. м.</td>
                                </tr>
                            </c:when>
                            <c:when test="${type == 'GARAGE'}">
                                <tr>
                                    <td>Площадь</td>
                                    <td>${ announcement.realty.area} кв. м.</td>
                                </tr>
                            </c:when>
                            <c:when test="${type == 'LAND'}">
                                <tr>
                                    <td>Площадь земли</td>
                                    <td>${ announcement.realty.landArea} ${typeMetricLandArea}</td>
                                </tr>
                            </c:when>
                            <c:when test="${type == 'OFFCIE'}">
                                <tr>
                                    <td>Комнат</td>
                                    <td>${ announcement.realty.numberRooms }</td>
                                </tr>
                                <tr>
                                    <td>Площадь</td>
                                    <td>${ announcement.realty.area} кв. м.</td>
                                </tr>
                            </c:when>
                            <c:otherwise>
                                Упс... ошибка
                            </c:otherwise>
                        </c:choose>
                    </table>
                </p>
            </div>
        </div>
    </div>

    <div class="span7">
        <!-- carousel and facybox bloks -->
        <c:if test="${not empty announcement.realty.photos}">
            <div  id="viewPhotoRealtyCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <c:forEach items="${announcement.realty.photos}" var="photo">
                        <div class="${hasActiveItem ? "" : "active "}item"><img src="/resources/photo/${photo.fileName}"/><div class="carousel-caption"><h4>${photo.description}</h4></div></div>
                        <c:set var="hasActiveItem" value="true"/>
                    </c:forEach>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#viewPhotoRealtyCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#viewPhotoRealtyCarousel" data-slide="next">&rsaquo;</a>
            </div>
            <div>
                <c:set var="countPhoto" value="0" scope="page" />
                <c:forEach items="${announcement.realty.photos}" var="photo">
                    <a href="#" onclick="$('#viewPhotoRealtyCarousel').carousel(${countPhoto});return false;"><img width="80px" height="60px" src="/resources/photo/${photo.fileName}"/></a>
                    <c:set var="countPhoto" value="${countPhoto + 1}" scope="page"/>
                </c:forEach>
            </div>
            <a id="carousel-view" style="display:none"></a>
        </c:if>
    </div>


    <!-- adress map -->
    <div class="span11">
        <h3>На карте</h3>
        <div id="mapCanvas" style="width:870px; height:350px;"></div>
    </div>

    <script>
        $(function(){
            $("#carousel-view").fancybox({
                helpers : {
                    title: {
                        type: 'inside'
                    }
                },
                nextEffect: 'fade',
                prevEffect: 'fade',
                'overlayShow'	:	true,
                'imageScale'    :   true,
                'closeBtn'      :   true
            });
            $("div.carousel-inner div.item").click(function() {
                console.log($(this).find("img").html());
                var img = $(this).find("img")[0];
                $("#carousel-view").html('<img src="' + img.src + '" />');

                $("#carousel-view").removeAttr("title");
                var caption = $(this).find(".carousel-caption");
                if (caption.length != 0) {
                    caption = caption[0];
                    if ($(caption).html()) {
                        $("#carousel-view").attr("title", $(caption).html());
                    }
                }
                $("#carousel-view").click();
            });

            // adress map
            $("#mapCanvas").geomap();
            $("#mapCanvas").geomap("setPlace", ${announcement.realty.googleAdressJSON});
            $("#mapCanvas").geomap("addMarker", ${announcement.realty.googleAdressJSON});
        });
    </script>
</div>
<%@ include file="blocks/footer.jsp" %>